<template>
  <div class="home" @click="gotoPlayVideo($event)">
    <div class="nav">
      <span class="styles" @click="goSearch(item.value)" v-for="item in styles" :key="item.value">{{item.label}}</span>
    </div>
    <div class="first-screen">
      <swiper class="swiper"/>
      <div class="hotVideo" >
        <PreviewPic v-for="(values,index) in hotVideo" :values="values" :key="index"/>
      </div>
    </div>
    <div class="styleArea" v-for="item in styles" :key="item.value">
      <p class="title">{{item.label}}</p>
      <div class="style-preview">
        <PreviewPic v-for="(values,index) in stylePreview[item.value]" :values="values" :key="index">
          <template slot="info" class="info">
            <p class="pre-title">{{values.videoName}}</p>
            <p class="pre-author"><i class="iconfont icon-avatar1"/> {{values.authorName}}</p>
          </template>
        </PreviewPic>
      </div>
      <div class="rank-list">
        <div class="rank-title">排行榜</div>
        <div class="rank-box play" v-for="(value,index) in styleRank[item.value]" :id="value.id" :key="index">
          <span class="rank-content"><span class="rank-num">{{index+1}}</span> &nbsp;{{value.videoName}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getVideoByStyle,getVideoByStyle2,getAllHotVideo,getVideoById} from '../api/index'
import {mixin} from '../mixins/index'
import {videoStyles} from '../assets/data/videoStyles'
import Swiper from '../components/Swiper'
import PreviewPic from '../components/PreviewPic'
import { mapGetters } from 'vuex'
export default {
  mixins:[mixin],
  components:{
    Swiper,
    PreviewPic
  },
  data(){
    return {
      hotVideo:[],
      styles:[],
      stylePreview:[],
      styleRank:[],
    }
  },
  computed:{
    ...mapGetters([
      'userId',,
      'collection',
      'history',
    ])
  },
  created(){
    this.styles = videoStyles
    this.getData()
  },
  methods:{
    getData(){
      //获取热门视频
      getAllHotVideo()
        .then(res =>{
          for (let i in res) {
            getVideoById(res[i])
            .then(res2 =>{
              this.hotVideo[i] = res2
            })
          }
        })
      //获取每个分区的视频
      let idx2 = 0
      for(let i in this.styles){
        getVideoByStyle(i)
        .then(res =>{
          let timer = setInterval(() => {
            if(i == idx2){
              this.stylePreview.push(res.slice(0,12))
              idx2++
              clearInterval(timer)
            }
          }, 100);
        })

        let idx3 = 0
        for(let i in this.styles){
          getVideoByStyle2(i)
          .then(res =>{
            let timer = setInterval(() => {
              if(i == idx3){
                this.styleRank.push(res.slice(0,10))
                idx3++
                clearInterval(timer)
              }
            }, 100);
          })
        }
      }
    },
  }
}
</script>

<style>
@import '../assets/css/home.css';
</style>